<template>
  <div class="login-container flx-center" v-if="false">
    <div class="login-box">
      <!-- <SwitchDark class="dark" /> -->
      <div class="login-left">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
      </div>
      <div class="login-form">
        <div class="login-logo">
          <img class="login-icon" src="@/assets/images/logo.png" alt="" />
          <h2 class="logo-text">中知信知产系统</h2>
        </div>
        <!-- <LoginForm /> -->
      </div>
    </div>
  </div>
  <div class="login">
    <div class="loginInfo">
      <div class="content">
        <div class="leftcontent">
          <div class="top">
            <div class="left-i-1">
              知产一站式管理系统<br />
              开启智能办公体验
            </div>
            <div class="left-i-2">客户管理 · 订单管理 · 立案管理 · 自定义工作流</div>
            <div class="left-i-3">
              <div class="it">
                <span class="checkBox">
                  <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/7b8a8f6b-8529-4e7c-bc8a-168c422d6c2e.png" alt="" />
                </span>
                <span class="text">CRM系统与订单、立案、材料匹配等各环节功能全覆盖</span>
              </div>
              <div class="it">
                <span class="checkBox">
                  <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/7b8a8f6b-8529-4e7c-bc8a-168c422d6c2e.png" alt="" />
                </span>
                <span class="text">高效管理、便捷服务</span>
              </div>
              <div class="it">
                <span class="checkBox">
                  <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/7b8a8f6b-8529-4e7c-bc8a-168c422d6c2e.png" alt="" />
                </span>
                <span class="text">助力用户顺利实现知识产权价值，提升综合竞争力</span>
              </div>
            </div>
          </div>
          <!-- 下面的 -->
          <div class="banner">
            <!--切换图片-->
            <div class="bannerImg">
              <transition-group class="slideUl" name="fade" tag="ul">
                <li
                  v-for="(list, index) in slideList"
                  v-show="index === currentIndex"
                  :key="index"
                  @mouseenter="stop"
                  @mouseleave="go"
                >
                  <a :herf="list.clickURL">
                    <img :alt="list.desc" :src="list.image" />
                  </a>
                </li>
              </transition-group>
            </div>
            <!--切换小按钮-->
            <div class="bannerItems">
              <span
                v-for="(item, index) in slideList.length"
                :key="index"
                :class="{ active: index === currentIndex }"
                @mouseover="bannnerChange(index)"
              ></span>
            </div>
          </div>
        </div>
        <div class="loginInfoRight">
          <div class="loginInfoRightContent">
            <div v-show="mainLoginPage">
              <div class="title">欢迎登录中知信</div>
              <div class="competition">构筑企业核心竞争力</div>
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="密码登录" name="password">
                  <el-form
                    ref="loginFormRef"
                    class="form"
                    :model="loginForm"
                    :rules="loginRules"
                    size="large"
                    hide-required-asterisk="true"
                  >
                    <el-form-item prop="username" label="账号" label-position="top" :required="true">
                      <el-input v-model="loginForm.username" placeholder="请输入账号">
                        <template #prefix>
                          <el-icon class="el-input__icon">
                            <user />
                          </el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码" label-position="top">
                      <el-input
                        v-model="loginForm.password"
                        type="password"
                        placeholder="请输入密码"
                        show-password
                        autocomplete="new-password"
                      >
                        <template #prefix>
                          <el-icon class="el-input__icon">
                            <lock />
                          </el-icon>
                        </template>
                      </el-input>
                      <span
                        style="
                          font-family: Inter, Inter;
                          font-weight: 400;
                          font-size: 14px;
                          color: #3370ff;
                          line-height: 22px;
                          position: absolute;
                          top: -30px;
                          right: 0;
                          cursor: pointer;
                        "
                        @click="forgetPassWord"
                        >忘记密码?</span
                      >
                    </el-form-item>
                    <el-form-item prop="code" label="验证码" label-position="top">
                      <el-input style="width: 244px" v-model="loginForm.code" placeholder="请输入验证码">
                        <template #prefix>
                          <el-icon class="el-input__icon">
                            <user />
                          </el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-button type="primary" :loading="loading" @click="login">登录</el-button>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="验证码登录" name="code">
                  <el-form
                    ref="loginCodeFormRef"
                    class="form"
                    :model="loginCodeForm"
                    :rules="loginCodeRules"
                    size="large"
                    hide-required-asterisk="true"
                  >
                    <el-form-item prop="phone" label="手机号码" label-position="top" :required="true">
                      <el-input v-model="loginCodeForm.phone" placeholder="请输入手机号码">
                        <template #prefix>
                          <el-icon class="el-input__icon">
                            <user />
                          </el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="phoneCode" label="手机验证码" label-position="top">
                      <div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
                        <el-input
                          v-model="loginCodeForm.phoneCode"
                          type="password"
                          placeholder="请输入手机验证码"
                          show-password
                          autocomplete="new-password"
                          style="width: 244px; height: 32px"
                        >
                          <template #prefix>
                            <el-icon class="el-input__icon">
                              <lock />
                            </el-icon>
                          </template>
                        </el-input>
                        <el-button
                          style="
                            width: 60px;
                            background: #ffffff;
                            border-radius: 4px 4px 4px 4px;
                            border: 1px solid #3370ff;
                            font-weight: 500;
                            font-size: 14px;
                            color: #3370ff;
                            margin-top: 0;
                          "
                          >获取</el-button
                        >
                      </div>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码" label-position="top">
                      <div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
                        <el-input style="width: 244px" v-model="loginCodeForm.code" placeholder="请输入验证码">
                          <template #prefix>
                            <el-icon class="el-input__icon">
                              <user />
                            </el-icon>
                          </template>
                        </el-input>
                        <el-button
                          style="
                            width: 60px;
                            background: #ffffff;
                            border-radius: 4px 4px 4px 4px;
                            border: 1px solid #3370ff;
                            font-weight: 500;
                            font-size: 14px;
                            color: #3370ff;
                            margin-top: 0;
                          "
                          >获取</el-button
                        >
                      </div>
                    </el-form-item>
                    <el-button type="primary" :loading="loading" @click="codeLogin">登录</el-button>
                  </el-form></el-tab-pane
                >
              </el-tabs>
            </div>
            <div v-show="!mainLoginPage">
              <div style="display: flex; justify-content: space-between">
                <div>
                  <div class="title">忘记密码</div>
                  <div class="competition">
                    {{ stepsIndex == 1 ? "请验证身份信息" : stepsIndex == 2 ? "请输入新的密码" : "恭喜重置成功" }}
                  </div>
                </div>
                <img
                  @click="returnLoginPage"
                  src="https://puqinzc.oss-cn-beijing.aliyuncs.com/643ca396-94a6-42ec-9fd3-cf87aa74a95f.png"
                  alt=""
                />
              </div>
              <!-- 步进器 -->
              <div class="el-steps">
                <div class="mobileVerification">
                  <span :class="stepsIndex == 1 ? 'serialNumber selectedSerialNumber' : 'serialNumber miss'">1</span>
                  <span class="text">手机验证</span>
                  <span class="line"></span>
                </div>
                <div class="resetPassword">
                  <span v-if="stepsIndex == 1" class="serialNumber">2</span>
                  <span v-if="stepsIndex == 2" class="serialNumber selectedSerialNumber">2</span>
                  <span v-if="stepsIndex == 3" class="serialNumber miss">2</span>
                  <span :class="stepsIndex >= 2 ? 'text' : 'text initialText'">重置密码</span>
                  <span class="line"></span>
                </div>
                <div class="resetCompleted">
                  <span :class="stepsIndex == 3 ? 'serialNumber selectedSerialNumber' : 'serialNumber'">3</span>
                  <span :class="stepsIndex == 3 ? 'text' : 'text initialText'" style="padding-right: 0">重置完成</span>
                </div>
              </div>
              <!-- 手机验证密码 -->
              <el-form
                ref="testVerifyLoginFormRef"
                class="form"
                :model="testVerifyLoginForm"
                :rules="testVerifyLoginRules"
                size="large"
                hide-required-asterisk="true"
              >
                <el-form-item v-if="stepsIndex == 1" prop="phone" label="手机号码" label-position="top" :required="true">
                  <el-input v-model="testVerifyLoginForm.phone" placeholder="请输入手机号码">
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <user />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item v-if="stepsIndex == 1" prop="code" label="验证码" label-position="top">
                  <el-input
                    v-model="testVerifyLoginForm.code"
                    type="password"
                    placeholder="请输入验证码"
                    show-password
                    autocomplete="new-password"
                    style="width: 244px"
                  >
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <lock />
                      </el-icon>
                    </template>
                  </el-input>
                  <el-button class="obtain" type="primary" @click="obtain">{{
                    (!state.smsSendBtn && "获取") || state.time + " s"
                  }}</el-button>
                </el-form-item>
                <!-- 重置密码页面 -->
                <el-form-item v-if="stepsIndex == 2" prop="oldPassWord" label="新密码" label-position="top" :required="true">
                  <el-input
                    v-model="testVerifyLoginForm.oldPassWord"
                    placeholder="请输入新密码"
                    type="password"
                    show-password
                    autocomplete="new-password"
                  >
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <lock />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item v-if="stepsIndex == 2" prop="newPassWord" label="确认密码" label-position="top">
                  <el-input
                    v-model="testVerifyLoginForm.newPassWord"
                    type="password"
                    placeholder="请再次输入新密码"
                    show-password
                    autocomplete="new-password"
                  >
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <lock />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <div v-if="stepsIndex == 3" class="resetSuccess">
                  <el-result icon="success" class="img"> </el-result>
                  <span class="text_one">重置成功</span>
                  <span class="text_two">重新登录系统</span>
                </div>
                <el-button v-if="stepsIndex == 1 || stepsIndex == 2" class="nextButton" type="primary" @click="next"
                  >下一步</el-button
                >
                <el-button v-else class="nextButton" type="primary" @click="logAgain">重新登录</el-button>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="content">
        <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/a11b6bdd-fe00-46b5-824b-2f02efd32fd5.png" alt="" />
        <div class="tabsAboutUs">
          <span>关于我们</span>
          <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/d27539d1-f432-4f31-a069-a47af3dab74c.png" alt="" />
          <span>联系我们</span>
          <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/d27539d1-f432-4f31-a069-a47af3dab74c.png" alt="" />
          <span>常见问题</span>
          <img src="https://puqinzc.oss-cn-beijing.aliyuncs.com/d27539d1-f432-4f31-a069-a47af3dab74c.png" alt="" />
          <span style="border: none">移动客户端</span>
        </div>
        <div class="copyright">版权所有 © 2024 IPMASTER 鲁ICP备19003396号-7</div>
        <div class="company">中知信(山东)科技服务有限公司</div>
      </div>
    </div>
  </div>
</template>
<!--  setup lang="ts" name="login" -->
<script>
// import LoginForm from "./components/LoginForm.vue";
// import SwitchDark from "@/components/SwitchDark/index.vue";
import md5 from "md5";
import { reactive, ref } from "vue";
import { HOME_URL } from "@/config";
import { useRouter } from "vue-router";
import { loginApi } from "@/api/modules/login";
import { useUserStore } from "@/stores/modules/user";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { useTabsStore } from "@/stores/modules/tabs";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  setup() {
    const slideList = ref([
      {
        image: "https://puqinzc.oss-cn-beijing.aliyuncs.com/1712122940023.png",
        desc: "第一张照片",
        clickURL: "https://puqinzc.oss-cn-beijing.aliyuncs.com/1712122940023.png"
      },
      {
        image: "https://puqinzc.oss-cn-beijing.aliyuncs.com/1712371602368.png",
        desc: "第二张照片",
        clickURL: "https://puqinzc.oss-cn-beijing.aliyuncs.com/1712371602368.png"
      },
      {
        image: "https://puqinzc.oss-cn-beijing.aliyuncs.com/1712371634415.png",
        desc: "第三张照片",
        clickURL: "https://puqinzc.oss-cn-beijing.aliyuncs.com/1712371634415.png"
      }
    ]);
    const timer = ref(null); // 自动切换的定时器
    const currentIndex = ref(0); // 当前显示的图片的索引
    const play = () => {
      timer.value = setInterval(() => {
        currentIndex.value++;
        if (currentIndex.value >= slideList.value.length) {
          currentIndex.value = 0;
        }
      }, 3000);
    };
    const stop = () => {
      clearInterval(timer.value);
    };
    const go = () => {
      play();
    };
    go();
    const bannnerChange = index => {
      currentIndex.value = index;
    };
    const activeName = ref("password");
    const loginForm = ref({});
    const loginCodeForm = ref({});
    const testVerifyLoginForm = ref({});
    const loginRules = reactive({
      username: [{ required: true, message: "请输入账号", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      // code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
    });
    const loginCodeRules = reactive({
      phone: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
      ],
      phoneCode: [{ required: true, message: "请输入手机验证码", trigger: "blur" }],
      code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
    });
    const testVerifyLoginRules = reactive({
      phone: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
        { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
      ],
      code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      oldPassWord: [
        { required: true, message: "请输入新密码", trigger: "blur" },
        { min: 6, message: "密码长度最小6位字符", trigger: "blur" }
      ],
      newPassWord: [
        { required: true, message: "请再次输入新密码", trigger: "blur" },
        {
          validator: (rule, value, callback) => {
            if (value !== testVerifyLoginForm.value.oldPassWord) {
              callback(new Error("确认密码与新密码不一致"));
            } else {
              callback();
            }
          },
          trigger: "blur"
        }
      ]
    });
    const stepsIndex = ref(1);
    const router = useRouter();
    const loading = ref(false);
    const loginFormRef = ref(null);
    const loginCodeFormRef = ref(null);
    const mainLoginPage = ref(true);
    const userStore = useUserStore();
    const tabsStore = useTabsStore();
    const testVerifyLoginFormRef = ref(null);
    const keepAliveStore = useKeepAliveStore();
    const state = ref({
      time: 60,
      smsSendBtn: false
    });
    const obtain = e => {
      e.preventDefault();
      testVerifyLoginFormRef.value.validateField("phone");
      if (!testVerifyLoginForm.value.phone) {
        ElMessage({
          type: "warning",
          message: "手机号不能为空"
        });
        return;
      }
      state.value.smsSendBtn = true;
      let interval = window.setInterval(() => {
        if (state.value.time-- <= 0) {
          state.value.time = 60;
          state.value.smsSendBtn = false;
          window.clearInterval(interval);
        }
      }, 1000);
      // const hide = this.$message.loading("验证码发送中..", 0);
      // let smsParams = {
      //   mobile: phone,
      //   smsmode: "2"
      // };
      // postAction("/sys/sms", smsParams).then(res => {
      //   if (!res.success) {
      //     setTimeout(hide, 1);
      //     this.cmsFailed(res.message);
      //   }
      //   setTimeout(hide, 500);
      // });
    };
    const handleClick = e => {
      console.log(e, "eeee");
    };
    const returnLoginPage = () => {
      mainLoginPage.value = true;
      testVerifyLoginForm.value = {};
      testVerifyLoginFormRef.value.resetFields();
    };
    const logAgain = () => {
      mainLoginPage.value = true;
      testVerifyLoginForm.value = {};
    };
    const forgetPassWord = () => {
      mainLoginPage.value = false;
      stepsIndex.value = 1;
    };
    const next = () => {
      testVerifyLoginFormRef.value.validate(valid => {
        if (valid) {
          if (stepsIndex.value == 2) {
            if (testVerifyLoginForm.value.oldPassWord != testVerifyLoginForm.value.newPassWord) {
              ElMessage({
                type: "warning",
                message: "两次输入的密码不一致，请重新输入!"
              });
            } else {
              stepsIndex.value++;
            }
          } else {
            stepsIndex.value++;
          }
        } else {
          return false;
        }
      });
    };
    const login = () => {
      loginFormRef.value.validate(async valid => {
        if (valid) {
          loading.value = true;
          try {
            // 1.执行登录接口
            const { data } = await loginApi({ ...loginForm.value, password: md5(loginForm.value.password) });
            userStore.setToken(data.access_token);
            // 2.添加动态路由
            await initDynamicRouter();
            // 3.清空 tabs、keepAlive 数据
            tabsStore.setTabs([]);
            keepAliveStore.setKeepAliveName([]);
            // 4.跳转到首页
            router.push(HOME_URL);
          } finally {
            loading.value = false;
          }
        } else {
          return false;
        }
      });
    };
    const codeLogin = () => {
      loginCodeFormRef.value.validate(async valid => {
        if (valid) {
          // loading.value = true;
          // try {
          //   // 1.执行登录接口
          //   const { data } = await loginApi({ ...loginForm.value, password: md5(loginForm.value.password) });
          //   userStore.setToken(data.access_token);
          //   // 2.添加动态路由
          //   await initDynamicRouter();
          //   // 3.清空 tabs、keepAlive 数据
          //   tabsStore.setTabs([]);
          //   keepAliveStore.setKeepAliveName([]);
          //   // 4.跳转到首页
          //   router.push(HOME_URL);
          // } finally {
          //   loading.value = false;
          // }
        } else {
          return false;
        }
      });
    };
    return {
      login,
      codeLogin,
      next,
      obtain,
      state,
      handleClick,
      returnLoginPage,
      logAgain,
      mainLoginPage,
      testVerifyLoginForm,
      testVerifyLoginRules,
      testVerifyLoginFormRef,
      stepsIndex,
      forgetPassWord,
      loading,
      loginRules,
      loginCodeRules,
      loginFormRef,
      loginCodeFormRef,
      loginForm,
      loginCodeForm,
      activeName,
      slideList,
      currentIndex,
      timer,
      play,
      stop,
      go,
      bannnerChange
    };
  }
};
</script>

<style scoped lang="scss">
@import "./index";
* {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.login {
  min-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-input {
    height: 32px;
  }
  .el-button {
    height: 32px;
  }
  .loginInfo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: url("./image/loginBigImage.png") no-repeat;
    background: url("https://puqinzc.oss-cn-beijing.aliyuncs.com/2e4699a3-d386-43f1-bbb5-9bac4aa5623e.png") no-repeat;
    background-size: 100% 100%;

    .content {
      width: 916px;
      height: 464px;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      .leftcontent {
        width: 480px;
        height: 464px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          height: 234px;
          .left-i-1 {
            height: 96px;
            font-family: Inter, Inter;
            font-weight: 700;
            font-size: 36px;
            color: #303133;
            line-height: 48px;
          }

          .left-i-2 {
            margin-top: 4px;
            height: 28px;
            font-family: Inter, Inter;
            font-weight: 400;
            font-size: 20px;
            color: #3370ff;
            line-height: 28px;
          }

          .left-i-3 {
            margin-top: 24px;
            .it {
              height: 22px;
              line-height: 22px;
              margin-bottom: 8px;
              display: flex;
              align-items: center;
              .text {
                font-family: Inter, Inter;
                font-weight: 400;
                font-size: 14px;
                color: #909399;
              }
              .checkBox {
                display: inline-block;
                width: 14px;
                height: 14px;
                background: #3370ff;
                border-radius: 2px 2px 2px 2px;
                border: 4px solid #3370ff;
                margin-right: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                  width: 11px;
                  height: 7px;
                }
              }
            }

            .it:last-child {
              margin-bottom: 0px;
            }
          }
        }
        .banner {
          width: 480px;
          height: 120px;
          position: relative;
          margin-top: -12px;
          .bannerItems {
            position: absolute;
            z-index: 1000;
            bottom: 0;
            height: 4px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            span {
              width: 4px;
              height: 4px;
              background: #bae0ff;
              border-radius: 2px 2px 2px 2px;
              margin: 0 4px;
              cursor: pointer;
            }
          }
          .bannerImg {
            .slideUl {
              list-style-type: none;
            }
            img {
              width: 480px;
              height: 120px;
              position: absolute;
              z-index: 800;
              top: -12px;
            }
          }
        }
        .bannerItems span.active {
          width: 14px;
          height: 4px;
          background: #409eff;
          border-radius: 2px 2px 2px 2px;
        }
      }
      .loginInfoRight {
        width: 360px;
        height: 100%;
        background-color: #ffffff;
        .loginInfoRightContent {
          max-width: 360px;
          max-height: 414px;
          height: 100%;
          padding: 24px 24px 0 24px;
          position: relative;
          .el-steps {
            height: 24px;
            width: 100%;
            margin: 12px 0 13px 0;
            display: flex;
            align-items: center;

            div {
              width: 118px;
              height: 100%;
              display: flex;
              align-items: center;

              .text {
                font-weight: normal;
                font-size: 12px;
                color: #3370ff;
                line-height: 22px;
                width: 48px;
                padding: 0 4px;
              }
              .initialText {
                color: #909399;
              }
              .line {
                width: 38px;
                height: 1px;
                background: #a8abb2;
              }
              .serialNumber {
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                display: inline-block;
                background: #ffffff;
                border-radius: 50px 50px 50px 50px;
                border: 2px solid #a8abb2;
                font-weight: 400;
                font-size: 14px;
                color: #a8abb2;
                line-height: 22px;
              }
              .twoMiss {
                color: #ffffff;
                background: #ecf5ff;
                border: 2px solid #3370ff;
              }
              .selectedSerialNumber {
                color: #ffffff;
                background: #3370ff;
                border: 2px solid #3370ff;
              }
              .miss {
                background: #ecf5ff;
              }
            }
            .resetCompleted {
              width: 76px;
              height: 100%;
            }
          }
          .nextButton {
            width: 312px;
            height: 32px;
            position: absolute;
            bottom: 0;
            left: 24px;
          }
          .resetSuccess {
            width: 100%;
            height: 252px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-weight: normal;
            .text_one {
              font-size: 16px;
              color: #303133;
              line-height: 24px;
            }
            .text_two {
              font-size: 14px;
              color: #909399;
              line-height: 22px;
              margin-top: 4px;
            }
            .img {
              width: 63px;
              height: 63px;
              margin-top: 62px;
            }
          }
          .el-form-item {
            margin-bottom: 15px;
            .obtain {
              width: 60px;
              margin-left: 8px;
            }
          }

          .demo-tabs {
            .form {
              .el-button {
                width: 100%;
                height: 32px;
                margin-top: 25px;
              }
              .el-form-item {
                margin-bottom: 15px;
              }
            }
          }

          .title {
            font-family: Inter, Inter;
            font-weight: 700;
            font-size: 20px;
            color: #303133;
            line-height: 28px;
          }
          .competition {
            font-family: Inter, Inter;
            font-weight: 300;
            font-size: 12px;
            color: #3370ff;
            line-height: 20px;
          }
          img {
            width: 9.58px;
            height: 9.58px;
            cursor: pointer;
            padding: 3px;
          }
        }
      }
    }
  }
  .footer {
    height: 176px;
    width: 100%;
    display: flex;
    justify-content: center;
    .content {
      width: 360px;
      height: 100%;
      text-align: center;
      img {
        width: 140px;
        height: 32px;
        margin: 30px 0 8px 0;
      }
      .tabsAboutUs {
        height: 20px;
        line-height: 20px;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 12px;
        color: #909399;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          padding-right: 12px;
        }
        img {
          width: 1px;
          height: 16px;
          margin-top: 7px;
        }
      }
      .copyright {
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 12px;
        color: #909399;
        line-height: 20px;
      }
      .company {
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 12px;
        color: #909399;
        line-height: 20px;
      }
    }
  }
}
</style>
